<template>
  <div class="result-contain">
    <!-- 检测中 -->
    <div class="checking" v-if="data.isChecked">
      <div class="back" @click="goBack"></div>
      <img src="" alt="" class="checking-body" />
      <div class="checking-text">正在检测您的健康状况…</div>
    </div>
    <!-- 已检测 -->
    <div v-else class="checked">
      <div class="checked-title">
        <div class="checked-title-left">
          <div class="text1" @click="goBack"></div>
          <div class="text2">
            <div class="text3">{{ data.userInfo.name }}</div>
            <div>｜健康状况图示</div>
          </div>
        </div>
        <div class="buttons">
          <div class="resultResetbtn">重新检测</div>
          <div class="resultReportbtn">查看报告</div>
        </div>
      </div>
      <div class="checked-body">
        <div class="img-box">
          <div class="img-item">
            <div class="img">
              <img src="../assets/images/boyfrant/all.png" alt="" class="person-all" />
              <img class="person-header" src="../assets/images/boyfrant/1.png" alt="" />
            </div>
            <div class="text1">正面图示</div>
          </div>
          <div class="img-item">
            <div class="img">
              <img src="" alt="" />
            </div>
            <div class="text1">反面图示</div>
          </div>
        </div>
        <div class="tips" style="display: none">
          <div class="close">
            <el-icon color="#ffffff"><Close /></el-icon>
          </div>
          <img src="" alt="" class="tips-img" />
          <div class="tips-text">
            左侧图中有光点的部位，<br />
            表示该部位有健康状况，<br />
            点击光点可以查看详情。
          </div>
        </div>
        <div class="problem">
          <div class="close">
            <el-icon color="#ffffff"><Close /></el-icon>
          </div>
          <div class="problem-top">
            <div class="problem-top-img">
              <img src="" alt="" />
            </div>
            <div class="problem-top-con">
              <div class="text1">胸部</div>
              <div class="text2">
                <img src="" alt="" />
                <div>重寒</div>
              </div>
              <div class="text3">
                <img src="" alt="" />
                <div>35-35.2℃</div>
              </div>
            </div>
          </div>
          <div class="problem-bottom">
            <div class="problem-bottom-item">
              <div class="problem-bottom-title">
                <img src="" alt="" />
                <div>疼痛解读：</div>
              </div>
              <div class="problem-bottom-contain">
                <div>
                  1.温度解读：低于标准正常0.8-1度，为重度风寒湿邪型臂疼。由于风湿和寒邪的入侵，下臂感风寒之邪。需注意下臂部位保暖，可以采用热疗提高疼痛部位温度，舒张肌肉内血管，加快血流速度。刺激肌肉新陈代谢加快，可以使肌肉内的风寒湿气尽快排出，减轻疼痛现象。
                </div>
                <div>
                  2.风寒湿邪下臂痛：风寒湿邪侵袭手臂时，可能会导致气血不畅，使局部血液循环减缓，导致手臂的肌肉和关节供血不足，引起疼痛。
                </div>
              </div>
            </div>
            <div class="problem-bottom-item">
              <div class="problem-bottom-title">
                <img src="" alt="" />
                <div>理疗方法：</div>
              </div>
              <div class="problem-bottom-contain">
                <div>
                  重度风寒湿型左下臂痛，寒气非常重，需立即进行驱寒理疗，散寒止痛，除湿通络。驱逐外邪。
                </div>
              </div>
            </div>
            <div class="problem-bottom-item">
              <div class="problem-bottom-title">
                <img src="" alt="" />
                <div>理疗方法：</div>
              </div>
              <div class="problem-bottom-contain">
                <div>
                  重度风寒湿型左下臂痛，寒气非常重，需立即进行驱寒理疗，散寒止痛，除湿通络。驱逐外邪。
                </div>
              </div>
            </div>
            <div class="problem-bottom-item">
              <div class="problem-bottom-title">
                <img src="" alt="" />
                <div>理疗方法：</div>
              </div>
              <div class="problem-bottom-contain">
                <div>
                  重度风寒湿型左下臂痛，寒气非常重，需立即进行驱寒理疗，散寒止痛，除湿通络。驱逐外邪。
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="report">
import { reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from '../stores'
const router = useRouter()
const route = useRoute()
const store = useStore()
// 初始化数据
let data = reactive({
  isChecked: false,
  id: route.query.id, //场次的ID
  userInfo: {}, //会员信息
  problem: []
})

// 获取会员信息
const getUserInfo = async () => {
  const res = await window.electron.ipcRenderer.invoke('frequency-get-user-by-id', data.id)
  data.userInfo = res
  getPhysicalStatus()
}
getUserInfo()
// 获取用户的身体状况
const getPhysicalStatus = async () => {
  const res = await window.electron.ipcRenderer.invoke('frequency-get-answer-by-id', data.id)

  res.forEach((el, index) => {
    let option = [] //选项信息
    for (let i = 0; i < store.questions.length; i++) {
      if (el.questionId == store.questions[i].id) {
        option = store.questions[i].options.filter((o) => o.id == el.answerId)[0]
        break
      }
    }
    if (option.error && option.error.length > 0) {
      option.error.forEach((opt) => {
        let index = data.problem.findIndex((item) => item.damger_id == opt.damger_id)
        if (index == -1) {
          data.problem.push({
            damger_id: opt.damger_id,
            error: opt.rate,
            success: 0
          })
        } else {
          data.problem[index].error += opt.rate
        }
      })
    }
    if (option.success && option.success.length > 0) {
      option.success.forEach((opt) => {
        let index = data.problem.findIndex((item) => {
          return item.damger_id == opt.damger_id
        })
        if (index == -1) {
          data.problem.push({
            damger_id: opt.damger_id,
            error: 0,
            success: opt.rate
          })
        } else {
          data.problem[index].success += opt.rate
        }
      })
    }
  })
  // 组装问题,各个部位出现问题的概率,以及按照error排序
  data.problem = data.problem.sort((a, b) => b.error - a.error)
}

// 返回
const goBack = () => {
  router.replace('/home')
}
</script>

<style lang="less" scoped>
.result-contain {
  width: 100%;
  height: 100%;
  background: #2c2d38;
}

.checking {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .back {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 36px;
    height: 36px;
    background: #31bab5;
    border-radius: 18px;
    cursor: pointer;
  }
  .checking-body {
    width: 417px;
    height: 520px;
    margin-bottom: 40px;
  }
  .checking-text {
    font-family: AlibabaPuHuiTi_2_85_Bold;
    font-size: 30px;
    color: #31bab5;
    letter-spacing: 0;
    line-height: 30px;
    font-weight: 700;
  }
}

.checked {
  height: 100%;
  .checked-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 0;
    margin-bottom: 24px;
  }
  .checked-title-left {
    display: flex;
    align-items: center;
    .text1 {
      width: 36px;
      height: 36px;
      background: #31bab5;
      border-radius: 18px;
      margin-right: 20px;
      cursor: pointer;
    }
    .text2 {
      display: flex;
      align-items: center;
      font-family: AlibabaPuHuiTi_2_85_Bold;
      font-size: 30px;
      color: #ffffff;
      letter-spacing: 0;
      line-height: 30px;
      font-weight: 700;
      .text3 {
        max-width: 500px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .buttons {
    display: flex;
    align-items: center;
    .resultResetbtn {
      margin-right: 20px;
    }
  }
}
.checked-body {
  height: calc(100% - 100px);
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
}
.img-box {
  display: flex;
  .img-item {
    &:first-child {
      margin-right: 114px;
    }
    .img {
      position: relative;
      width: 242px;
      height: 524px;
      margin-bottom: 8px;
      border: 1px solid #fff;
    }
    .text1 {
      font-family: AlibabaPuHuiTi_2_85_Bold;
      font-size: 17px;
      color: #ffffff;
      letter-spacing: 0;
      text-align: center;
      font-weight: 700;
    }
  }
}
.tips {
  background: #444357;
  border-radius: 16px;
  padding: 36px 27px;
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
  width: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #2b2d38;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .tips-img {
    width: 32px;
    height: 32px;
    margin-bottom: 15px;
  }
  .tips-text {
    font-family: AlibabaPuHuiTi_2_85_Bold;
    font-size: 16px;
    color: #ffffff;
    letter-spacing: 0;
    text-align: center;
    line-height: 27px;
    font-weight: 700;
  }
}
.problem {
  position: relative;
  background: #444357;
  border-radius: 16px;
  width: 460px;
  height: 566px;
  padding: 30px 40px;
  .close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #2b2d38;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .problem-top {
    display: flex;
    align-items: stretch;
    padding-bottom: 24px;
    .problem-top-img {
      width: 130px;
      height: 130px;
      background: #2b2d38;
      border-radius: 16px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .problem-top-con {
      padding-left: 20px;
      .text1 {
        font-family: AlibabaPuHuiTi_2_85_Bold;
        font-size: 26px;
        color: #ffffff;
        letter-spacing: 0;
        line-height: 26px;
        font-weight: 700;
        margin-bottom: 24px;
      }
      .text2 {
        display: flex;
        align-items: center;
        font-family: AlibabaPuHuiTi_2_85_Bold;
        font-size: 20px;
        color: #31bab5;
        letter-spacing: 0;
        line-height: 17px;
        font-weight: 700;
        margin-bottom: 15px;
        img {
          width: 16px;
          height: 16px;
          margin-right: 4px;
        }
      }
      .text3 {
        border: 1px solid rgba(221, 221, 221, 0.5);
        border-radius: 15px;
        padding: 4px 10px;
        font-size: 14px;
        color: #ffffff;
        display: flex;
        align-items: center;
        img {
          width: 16px;
          height: 16px;
          margin-right: 4px;
        }
      }
    }
  }
  .problem-bottom {
    height: calc(100% - 130px - 24px);
    overflow: auto;
    .problem-bottom-item {
      margin-bottom: 30px;
    }
    .problem-bottom-title {
      display: flex;
      align-items: center;
      font-family: AlibabaPuHuiTi_2_85_Bold;
      font-size: 18px;
      color: #ffffff;
      letter-spacing: 0;
      font-weight: 700;
      margin-bottom: 10px;
      img {
        width: 24px;
        height: 24px;
        margin-right: 4px;
      }
    }
    .problem-bottom-contain {
      font-family: AlibabaPuHuiTi_2_55_Regular;
      font-size: 15px;
      color: #ffffff;
      letter-spacing: 0;
      text-align: justify;
      line-height: 24px;
      font-weight: 400;
    }
  }
}

// 正面
.person-all {
  width: 100%;
}
.person-header {
  position: absolute;
  top: 0;
  left: 94px;
  width: 50px;
}
</style>
